<template>
    <div>
        <el-table :data="rightList" style="width: 100%" row-key="path">
            <el-table-column prop="title" label="权限名称" width="180" />
            <el-table-column prop="icon" label="图标" width="180">
                <template #default="scope">
                    <el-icon size="20px">
                        <component :is="ElementPlusIconsVue[scope.row.icon]"></component>
                    </el-icon>
                </template>
            </el-table-column>
            <el-table-column prop="path" label="路由" />
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button @click="handleEdit(scope.row)" size="small" type="primary" round>编辑</el-button>
                    <el-popconfirm title="确定要删除吗？" confirm-button-text="确定" cancel-button-text="取消"
                        @confirm="handleDelete(scope.row)">
                        <template #reference>
                            <el-button size="small" type="danger" round>删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog v-model="dialogVisible" title="编辑" width="30%">
            <el-form :model="rightForm">
                <el-form-item label="权限名称">
                    <el-input v-model="rightForm.title" autocomplete="off" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="handleUpdate">保存</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import axios from 'axios'
import { onMounted, reactive, ref } from 'vue'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
const rightList = ref([])
onMounted(() => {
    // 调用接口获取权限列表数据
    getList()
})

const getList = async () => {
    var res = await axios.get('/adminapi/rights')
    rightList.value = res.data
}

// 控制对话框显示隐藏
const dialogVisible = ref(false)
const rightForm = reactive({
    title: ''
})

// 保存当前更新的item项
let curItem

const handleEdit = (row) => {
    rightForm.title = row.title
    curItem = row
    dialogVisible.value = true
}

const handleUpdate = () => {
    dialogVisible.value = false
    updateRight()
}

const updateRight = async () => {
    var res = await axios.put('/adminapi/rights', {
        data: curItem,
        title: rightForm.title
    })
    if (res.statusText === 'OK') {
        ElMessage({
            message: '更新成功',
            type: 'success'
        })
        await getList()
        // 如果需要保证管理员更新权限名称后后，就能立即看到左侧菜单栏的变更，可以通过刷新界面这种简单的方式实现
        // location.reload()
    } else {
        ElMessage({
            message: '更新失败',
            type: 'error'
        })
    }
}

const handleDelete = async (row) => {
    axios.delete('/adminapi/rights', {
        data: row
    })
    // location.reload()
    await getList()
}
</script>